﻿define('ui/card/pointDetailCard', 
	['api/pointService','ui/card/layerCard'], function(pointService, layerCard) {

	/**
	 * 排口详情图表选项卡，包含以下功能：
	 * 1、地图上选择排口，查看该排口基本信息、排放标准、监测数据：各污染物最近24小时以线显示
	 * 2、包含的数据：
	 * 1）charts：柱状图表实例化对象
	 * 2）chartsData：柱状图所需的JSON数据
	 */
	var pointDetailCard = {

		/**
		 * 实例化图表对象
		 */
		charts: {
			pointDetailBaseTab:null,
			pointDetailStandardTab:null,
			pointDetailRealDataTab:null
		},
		
		/**
		 * 图表JSON数据
		 */
		chartsData: {
			pointDetailBaseTab: {
				pointcode:'',
				pointname:'',
				pollutesName:''
			},
			pointDetailStandardTab: {
				pointcode:'',
				rows: []
			},
			pointDetailRealDataTab: {
				rows:[],
				title: '最近24小时数据趋势',
				legend: [],
				xAxis: [],
				series: []
			},
			
			resetData: function(){
				pointDetailCard.chartsData.pointDetailBaseTab={
					pointcode:'',
					pointname:'',
					pollutesName:''
				};
				pointDetailCard.chartsData.pointDetailStandardTab={
					pointcode:'',
					rows: []
				};
			}
		},
		
		/**
		 * 初始化图表
		 */
		initChart: function(divId) {
			var myChart = echarts.init(document.getElementById(divId)); 
			pointDetailCard[''+divId] = myChart;
			return myChart;
		},
		
		/**
		 * 获取图表
		 */
		getChart: function(divId) {
			return pointDetailCard[''+divId];
		},
			
		/**
		 * 加载数据并赋值给chartsData
		 * 1、基本信息、排放标准
		 * 2、实时数据
		 */
		loadJsonData: function(param) {
			layerCard.showCardItem('pointDetail');
			pointService.getPointInfoByCode(param, function(res){
				var pollutesName = "";
        		if(res.rows && res.rows.length>0) {
        			var data = res.rows[0]; 
        			pointDetailCard.chartsData['pointDetailBaseTab'] = data;
        			if(data.listPollutename.length && data.listPollutename.length>0){
        				pointDetailCard.chartsData['pointDetailStandardTab']['rows'] = data.listPollutename;
        				for(var i=0; i< data.listPollutename.length; i++) {
        					pollutesName += data.listPollutename[i].pollutename + ",";
        				}
        			}
        		}else {
        			pointDetailCard.chartsData.resetData();
        		}
        		pointDetailCard.chartsData['pointDetailStandardTab']['pointcode'] = param.pointcode;
        		pointDetailCard.chartsData['pointDetailBaseTab']['pointcode'] = param.pointcode;
        		pointDetailCard.chartsData['pointDetailBaseTab']['pointname'] = param.pointname;
        		pointDetailCard.chartsData['pointDetailBaseTab']['pollutesName'] = pollutesName;
        		
            	pointDetailCard.renderBaseTab(pointDetailCard.chartsData['pointDetailBaseTab']);
        		pointDetailCard.renderStandardTab(pointDetailCard.chartsData['pointDetailStandardTab']);
        		pointDetailCard.show();
			});
			
			pointService.getPointRealTimeDataByCode(param, function(res){
				if(res.rows && res.rows.length>0) {
            		var data = res.rows;
            		pointDetailCard.chartsData['pointDetailRealDataTab']['rows'] = data;
            		for(var i=0; i<data.length; i++) {
            			pointDetailCard.chartsData['pointDetailRealDataTab']['legend'].push(data[i].pointname);
            			var serie = {
            	            name: data[i].pointname,
            	            type: 'line',
            	            data: [],
            	            markPoint : {
            	                data : [
            	                    {type : 'max', name: '最大值'},
            	                    {type : 'min', name: '最小值'}
            	                ]
            	            }/*,
            	            markLine : {
            	                data : [
            	                    {type : 'average', name: '平均值'}
            	                ]
            	            }*/
            	        };
            			var len = data[i].listConcentration.length;
            			if(len>0) {
            				for(var j=0; j<data[i].listConcentration.length; j++) {
            					serie.data.push(data[i].listConcentration[j].concentration);
            					if(pointDetailCard.chartsData['pointDetailRealDataTab']['xAxis'].length<data[i].listConcentration.length) {
            						pointDetailCard.chartsData['pointDetailRealDataTab']['xAxis'].push(data[i].listConcentration[j].currentTime);
            					}
            				}
            				data[i]['currentData'] = data[i].listConcentration[len-1].concentration;
            			}
            			pointDetailCard.chartsData['pointDetailRealDataTab']['series'].push(serie);
            		}
            	}
        		pointDetailCard.renderRealDataTab(pointDetailCard.chartsData['pointDetailRealDataTab']);
			});
	    },
		
	    show:function(){
	    	$('#pointDetailTabDiv').show();
	    },
	    
		/**
		 * 重新渲染标签页
		 */
		renderTab:function(data){
			//pointDetailCard.loadJsonData(data);
			pointDetailCard._onTabToggle();
			pointDetailCard._onTabShown();
		},
		
		/**
		 * 显示、隐藏排污许可企业信息汇总标签页面板
		 */
		_onTabToggle: function(){
			$("#pointDetailLayerList").click(function(){
				$(this).find('div').toggleClass('on');
				$("#pointDetailTabDiv").toggle();
				//$('#pointDetailTab a:first').tab('show');
			});
		},
		
		/**
		 * 标签页显示时触发渲染柱状图，放在
		 */
		_onTabShown:function(){
			$('#pointDetailTab>li>a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
				// 获取已激活的标签页的名称
				var activeTab = $(e.target).text(); 
				// 获取前一个激活的标签页的名称
				var previousTab = $(e.relatedTarget).text();
				var divId = $(e.target).attr('href').substring(1);
				//未激活页签时图表未创建，激活tab页签时实例化图表，防止dom多次实例化已存在的对象
				/*if(pointDetailCard.getChart(divId)==null) {
					pointDetailCard.initChart(divId);
				} 
				pointDetailCard.createBar(divId, pointDetailCard.chartsData[divId]);*/
			});
		},
		
		/**
		 * 基本信息
		 */
		renderBaseTab: function(data) {
			$('#pointHead').html(data.pointname + "：" + data.pointcode);
			AMapUI.loadUI(['misc/MarkerList'], function(MarkerList) {
				var table = '<table class="table">'+
								'<tr><td>污染物种类：</td><td>'+'<%- data.pollutesName %>'+'</td></tr>'+
								'<tr><td>排放口地理坐标：</td><td>'+'<%- data.longitude %>/'+'<%- data.latitude %>'+'</td></tr>'+
								'<tr><td>生产设施名称：</td><td>'+'<%- data.pname %>'+'</td></tr>'+
								'<tr><td>排放形式：</td><td>'+'<%- data.eform %>'+'</td></tr>'+
								'<tr><td>排放口类型：</td><td>'+'<%- data.pointtype %>'+'</td></tr>'+
								'<tr><td>排气筒高度：</td><td>'+'<%- data.outpointheight %>'+'</td></tr>'+
								'<tr><td>排气筒出口内径：</td><td>'+'<%- data.pfknj %>'+'</td></tr>'+
								'<tr><td>所属企业：</td><td>'+'<%- data.entername %>'+'</td></tr>'+
							'</table>';
				var html = MarkerList.utils.template(table, {data: data});
				$("#pointDetailBaseTab").html("").html(html); 
			});
		},
		
		/**
		 * 排放标准
		 */
		renderStandardTab: function(data) {
			AMapUI.loadUI(['misc/MarkerList'], function(MarkerList) {
				var table = '<table class="table">'+
								'<th>排口编号</th><th>污染物种类 </th><th>许可排放浓度限值(mg/L)</th>'+
								'<% for(var i=0;i < data.rows.length;i++) { %>'+  
									'<tr>'+
										'<td>'+'<%- data.pointcode %>'+'</td>'+
										'<td>'+'<%- data.rows[i].pollutename %>'+'</td>'+
										'<td>'+'<%- data.rows[i].convalueLimit %>'+'</td>'+
									'</tr>'+
								'<% } %>';
							'</table>';
				var html = MarkerList.utils.template(table, {data: data});
				$("#pointDetailStandardTab").html("").html(html); 
			});
		},
		
		/**
		 * 实时监测数据
		 */
		renderRealDataTab: function(data) {
			AMapUI.loadUI(['misc/MarkerList'], function(MarkerList) {
				var table = '<table class="table" style="margin-bottom: 0px;!important;">'+
								'<th>实时监测数据</th>'+
								'<% for(var i=0;i < data.rows.length;i++) { %>'+  
									'<tr>'+
										'<td>'+'<%- data.rows[i].polluteName %>'+'</td>'+
										'<td>'+'<%- data.rows[i].currentData %>'+'</td>'+
										'<td>'+'<%- data.rows[i].pollconUnit %>'+'</td>'+
									'</tr>'+
								'<% } %>'+
							'</table>'+
							'<table class="table" style="margin-bottom: 0px;!important;">'+
							'<th>最近24小时数据趋势</th>'+
							'</table>'+
							'<div id="pointDetail24HLine" class="panel-body" style="border-color: #fff;!important;width:380px;height:300px;;">'+
							'</div>';
				var html = MarkerList.utils.template(table, {data: data});
				$("#pointDetailRealDataTab").html("").html(html); 
				console.log($('#pointDetail24HLine').length);
				if(pointDetailCard.getChart('pointDetail24HLine')==null) {
					pointDetailCard.initChart('pointDetail24HLine');
				} 
				pointDetailCard.createLine('pointDetail24HLine', pointDetailCard.chartsData['pointDetailRealDataTab']);
			});
		},
		
		 /** 
	     * 添加折线图 
	     */  
		createLine: function(divId, data) {
		    // 基于准备好的dom，初始化echarts图表
	        var myChart = pointDetailCard.getChart(divId); 
	        
	        var option = {
	    	    title : {
	    	        text: data.title,
	    	        show: false,
	    	        textStyle:{
	    	            fontSize: 14,
	    	            fontWeight: 'bolder',
	    	            color: '#333'
	    	        }    
	    	    },
	    	    tooltip : {
	    	        trigger: 'axis',
	    	        backgroundColor: '#fff',
	    	        textStyle:{ color:'#333' }
	    	    },
	    	    legend: {
	    	    	x:'center',
	    	    	y:'top',
	    	        data:data.legend
	    	    },

	    	    calculable : true,
	    	    xAxis : [
	    	        {
	    	            type : 'category',
	    	            data : data.xAxis
	    	        }
	    	    ],
	    	    yAxis : [
	    	        {
	    	            type : 'value'
	    	        }
	    	    ],
	    	    series : data.series
	    	};

	        // 为echarts对象加载数据 
	        myChart.setOption(option); 
		}
	};
	
	return pointDetailCard;
});